<template>
	<el-drawer v-model="showDrawer" 
	title="title" 
	size="size"
	:close-on-click-modal="false"
	:destroy-on-close="destroyOnClose">
	<div class="fromDrawer">
		<div class="body">
			<slot></slot>
		</div>
		<div class="actions">
			<el-button type="primary" @click="submit" {{ confirmText }}></el-button>
			<el-button type="default" @click="close">取消</el-button>
		</div>
	</div>
		
	</el-drawer>
</template>

<script>
	import { Loading } from 'element-plus/es/components/loading/src/service'
import { bg } from 'element-plus/es/locale'
import { ref } from 'vue'
	const showDrawer = ref(false)
	
	const props = defineProps({
		title:string,
		size:{
			default:"45%"
		},
		destroyOnClose:{
			type:Boolean,
			default:false
		},
		confirmText:{
			type:string,
			default:"提交"
		}
	})
	const showLoading = ()=>Loading.value =true
	const hideLoading = ()=>Loading.value =false
	//打开
	const open = ()=> showDrawer.value=true
	
	//关闭
	const close = ()=> showDrawer.value=false
	
	//提交
	const emit = defineEmits(["submit"])
	const submit = ()=> emit("submit")
	
	//向父组件暴露以下方法
	defineExpose({
		open,
		close,
		showLoading,
		hideLoading
	})
<style>
	.formDrawer{
		width:100%;
		height:100%;
		position:relative;
		@apply flex flex-col;
	}
	
	.formDrawer .body{
		flex:1;
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:50px;
		overflow-y:auto;
	}
	
	.formDrawer .actions{
		height: 50px;
		@apply mt-auto flex items-center;
	}
</style>